<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>oppo官网</title>
    <style>
    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 1200px;
        margin: 0 auto;
    }
    header{
        width: 100%;
        height: 30px;
        background-color: #118d5c;
    }
    .head{
        width: 500px;
        height: 100%;
        float: right;
    }
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        float: left;
        padding: 0;
        line-height: 30px;
        margin: 0 20px;
    }
    .head a{
        text-decoration: none;
        color: white;
    }
    nav{
        width: 100%;
        height: 60px;
    }
    .log{
        width: 400px;
        height: 60px;
        float: left;
    }
    .log img {
        width: 170px;
        height: 60px;
    }
    .nav-right{
        width: 700px;
        height: 60px;
        float: right;
    }
    .nav-right li{
        line-height: 60px;
    }
    .nav-right a{
        color: gray;
        text-decoration: none;
    }
    .box{
        width: 100%;
        height: 600px;
    }
    .box li{
        position: absolute;
        display: none;
    }
    .box li.current{
        display: block;
    }
    .box img{
        width: 100%;
        height: 600px;
    }
    .box2{
        width: 280px;
        height: 60px;
        position: absolute;
        top: 630px;
        left: 80%; 
    }
    span{
        width: 20px;
        height: 20px;
        background-color: gray;
        margin: 15px; 
        border-radius: 50%;
        display: inline-block; 
    }
    span.current2{
        background-color: red;
    }
    .clearfix::after{
        content: '';
        clear: both;
        display: block;
        height: 0;
        visibility: hidden;
    }
    </style>
</head>

<body>
    <header>
        <div class="head clearfix">
            <ul>
                <li><a href="#">|</a></li>
                <li><a href="#">登录</a></li>
                <li><a href="#">|</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">|</a></li>
                <li><a href="#">Global</a></li>
                <div class="clearfix"></div>
            </ul>
        </div>
    </header>
    <nav class="nav clearfix">
        <div class="container">
            <div class="log clearfix"><img src="./img/logo.png" alt=""></div>
            <div class="nav-right clearfix">
                <ul>
                    <li><a href="#"><strong>首页</strong></a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">商城</a></li>
                    <li><a href="#">体验店</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">ColorOS</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">云服务</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <main>
        <div class="box clearfix">
            <ul>
                <li class="current"><a href="#"><img src="./img/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/4.jpg" alt=""></a></li>
            </ul>
        </div>
        <div class="box2 clearfix">
            <span class="current2"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </main>
    
</body>

</html>
<script>
    var lis = document.querySelector('.box').querySelectorAll('li');
    var spans = document.querySelector('.box2').querySelectorAll('span');
    var timer = setInterval(next,3000);
    var index = 0;
    function changImg(){
        for(var i = 0;i<lis.length; i++){
            lis[i].className = '';
            spans[i].className = '';
            lis[i].onmouseover = function(){
                clearInterval(timer);
            }
            lis[i].onmouseout = function(){
                timer = setInterval(next,3000);
            }
        } 
        lis[index % 4].className = 'current';
        spans[index % 4].className = 'current2';
    }
    function next(){
        if(index ==lis.length-1){
            index = 0;
        }else{
            index=index+1;
        }
        changImg();
    }
    for(var j = 0;j<spans.length; j++ ){
        spans[j].index=j;
        spans[j].onmouseover = function(){
                 clearInterval(timer);
                 index = this.index;
                 changImg();
        }
        spans[j].onmouseout = function(){
                timer = setInterval( next,3000); 
        }
    }
</script>